<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<canvas id="canvas1" width="400" height="400"></canvas>
<canvas id="canvas2" width="400" height="400"></canvas>
<canvas id="canvas3" width="400" height="400"></canvas>
<canvas id="canvas4" width="400" height="400"></canvas>
</body>
<script>
    var canvas1 = document.getElementById('canvas1')
    var ctx1 = canvas1.getContext('2d')

    //设置开始路径
    ctx1.beginPath()
    //设置绘制的起始点
    ctx1.moveTo(50, 50)
    //设置经过某个位置
    ctx1.lineTo(50, 300)
    //设置经过某个位置
    ctx1.lineTo(300, 100)
    //设置经过某个位置
    ctx1.lineTo(300, 250)
    //设置结束路径，从当前点回到起始点
    ctx1.closePath()

    //绘制路径
    ctx1.lineCap = 'round' //起始路径的线段边缘设置为圆角，起点、终点
    // ctx.lineJoin = 'round' //拐角的样式
    ctx1.miterLimit = 1 //设置最大斜接长度，参数为1、2、3
    ctx1.strokeStyle = 'aqua'
    ctx1.lineWidth = 20
    ctx1.stroke()
</script>
<script>
    var canvas2 = document.getElementById('canvas2')
    var ctx2 = canvas2.getContext('2d')
    //坐标x、坐标y、半径、起始角度、结束角度、方向（true代表逆时针）
    ctx2.arc(200, 300, 100, 0, Math.PI, true)
    //填充颜色
    ctx2.fillStyle = 'bisque'
    ctx2.fill()
    ctx2.stroke()
</script>
<script>
    var canvas3 = document.getElementById('canvas3')
    var ctx3 = canvas3.getContext('2d')
    ctx3.font = '50px 微软雅黑'
    //设置阴影
    ctx3.shadowBlur = 20
    ctx3.shadowColor = 'rgb(0, 0, 0)'
    ctx3.shadowOffsetX = 10
    ctx3.shadowOffsetY = 10
    var x = 500
    //一般写法，实现一个弹幕,10ms刷新一次,会有抖动感
    setInterval(() => {
        //清空画布
        ctx3.clearRect(0, 0, 400, 400)
        x -= 1
        if (x < -100) {
            x = 500
        }
        ctx3.fillText('helloworld', x, 100)
        ctx3.strokeText('中午吃啥', x, 200)
    }, 10)

</script>
<script>
    var canvas4 = document.getElementById('canvas4')
    var ctx4 = canvas4.getContext('2d')
    ctx4.font = '50px 微软雅黑'
    //设置阴影
    ctx4.shadowBlur = 20
    ctx4.shadowColor = 'rgb(0, 0, 0)'
    ctx4.shadowOffsetX = 10
    ctx4.shadowOffsetY = 10
    var y = 500
    //动画帧数与屏幕刷新率相同
    var animation = () => {
        ctx4.clearRect(0, 0, 400, 400)
        y -= 1
        if (y < -100) {
            y = 500
        }
        ctx4.fillText('helloworld', y, 100)
        ctx4.strokeText('中午吃啥', y, 200)
        window.requestAnimationFrame(animation)
    }
    window.requestAnimationFrame(animation)
</script>
</html>
